{% extends "head.html" %}
{% block content %}
<div class="row" style="padding: 10px;">
    <div class="col-sm-3 col-4" style="padding-top: 10px; padding-bottom: 20px; background-color: antiquewhite;">
        <p>Follow&nbsp;&nbsp;{{data['follower_count']}}</p>
<!--        <p>关注列表&nbsp;&nbsp;{{data['follower_count']}}</p>-->
        {% for follower in data['followers']%}
        <br>
        <div class="subtitle" style="border: solid 1px gray;padding: 5px;">
                <a href="{{url_for('person',user_id=follower.userid)}}">
                    <img src="../static/image/head/{{follower.head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                </a>
                <div style="padding: 15px;">
                    <a href="{{url_for('person',user_id=follower.userid)}}">
                        <p>{{follower.nickname}}</p>
                    </a>
                </div>
        </div>
        {% endfor %}
    </div>
    <div class="col-sm-1"></div>
    <div class="col-sm-3 col-4" style="padding-top: 10px; padding-bottom: 20px; background-color: antiquewhite;">
        <p>Fan&nbsp;&nbsp;{{data['fan_count']}}</p>
<!--        <p>粉丝列表&nbsp;&nbsp;{{data['fan_count']}}</p>-->
        {% for fan in data['fans']%}
        <br>
        <div class="subtitle" style="border: solid 1px gray;padding: 5px;">
                <a href="{{url_for('person',user_id=fan.userid)}}">
                    <img src="../static/image/head/{{fan.head_pic}}" style="height: 56px;width: 56px;border-radius: 50%;">
                </a>
                <div style="padding: 15px;">
                    <a href="{{url_for('person',user_id=fan.userid)}}">
                        <p>{{fan.nickname}}</p>
                    </a>
                </div>
        </div>
        {% endfor %}
    </div>
    <div class="col-sm-1"></div>
    <div class="col-sm-3 col-4" style="padding-top: 10px; padding-bottom: 20px; background-color: antiquewhite;">
        <p>Make friends</p>
<!--        <p>添加好友</p>-->
        <div  id="essay" contenteditable="true"
            style="background-color: white;border: solid 2px gainsboro; margin-top: 10px;">
<!--            输入账号-->
            Account
        </div>
        <script>
            $("#essay").focus(function(){
                $("#essay").html("")
            })
        </script>
        <div class="row" style="padding-top: 10px;padding-bottom: 10px;padding-left: 16px;padding-right: 16px;">
            <button type="submit" id="essay-btn" style="
            opacity: 1;
            {% if authority != 2 %}
            cursor: not-allowed;
            {% endif %}
            width: 70px;
            height: 32px;
            outline: none;
            background-color: #00a1d6;
            font-size: 13px;
            line-height: 33px;
            color: #fff;
            border: none;
            border-radius: 4px;">submit</button>
        </div>
        {% if authority == 2 %}
        <script>
        $("#essay-btn").click(function(){
            content = $.trim($("#essay").html())
            content.replace(/^\s*|\s*$/g,"");
            if(content==""||content.length!=11){
                // alert("查无此人")
                alert("There is no such person")
                return
            }
            $.ajax({
                url:'/follow/'+{{data['user'].userid}},
                type:'post',
                data:{content:content},
                success: function(data){
                    if (data['code']==1){
                        alert(data['mesg'])
                    }
                    else{
                        $("#head_p").attr("src","../static/image/head/"+data['mesg']['head'])
                        //$("#ac").html("&nbsp;&nbsp;账号: "+data['mesg']['account'])
                        $("#ac").html("&nbsp;&nbsp;account: "+data['mesg']['account'])
                        //$("#nk").html("&nbsp;&nbsp;昵称: "+data['mesg']['nickname'])
                        $("#nk").html("&nbsp;&nbsp;nickname: "+data['mesg']['nickname'])
                        $("#res").removeAttr("hidden")
                        $("#url").attr("href","/person/"+data['mesg']['userid'])
                    }
                }
            });
        })
        </script>
        <div class="subtitle" style="padding-top: 10px;padding-bottom: 10px;padding-left: 16px;border: solid 2px red;" id="res" hidden>
            <a id="url" href="">
                <img id="head_p" src="1" style="height: 56px;width: 56px;border-radius: 50%;">
                <p id="ac"></p>
                <p id="nk"></p>
            </a>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}